<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 完全匹配 */
        [href="b.mp3"]{
            color: red;
        }
        /* a开头 */
        [href^="a"]{
            color: pink;
        }
        /* 4结尾 */
        [href$="4"]{
            color: gold;
        }
        /* 模糊匹配 */
        [href*="."]{
            color: green;
        }
    </style>
</head>
<body>
    <!-- 
    <标签名称 属性名称="属性值">文本</标签名称>
    1.标签名称
    2.属性
    3.文本 (子节点==文本节点) -->
    <a href="a.mp3">a.mp3</a><br>
    <a href="b.mp3">b.mp3</a><br>
    <a href="a.mp4">a.mp4</a><br>
    <a href="b.mp4">b.mp4</a><br>
    <div></div>
    <span></span>
    <h1></h1>
</body>
</html>